<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车宣传</title>
    <link rel="stylesheet" href="css/jquery.fullpage.css">
    <link rel="stylesheet" href="css/index.css">

</head>
<body>
<!-- 结构 -->
    <!-- 公用的元素-->
    <a href="#" class="go"><img src="images/00-go.png" alt=""></a>
    <a href="javascript:;" class="more"><img src="images/00-more.png" alt=""></a>
    <!-- 整体容器 -->
    <!-- 1. 指示器  点容器 -->
    <div class="container">
        <!-- 每一个切换的屏幕 背景 -->
        <div class="section screen01">
            <!-- 如果是大屏幕 是基于top定位 脱离显示区域 固定在一个区域内 用一个固定大小的容器来装 -->
            <div class="content">
                <!-- 商品列表，沙发，横幅-->
                <div class="goods"><img src="images/01-goods.png" alt=""></div>
                <div class="sofa"><img src="images/01-sofa.png" alt=""></div>
                <div class="fly"><img src="images/01-fly.png" alt=""></div>
            </div>
        </div>
        <!-- 第二屏  动画特点：完全进入当前屏的时候执行动画 -->
        <!-- 1. 什么时候完全进入 -->
        <!-- 2. 怎么做动画  给大容器追加一个类  在这个类下面可以给需要做动画的元素添加动画属性 -->
        <div class="section screen02">
            <div class="content">
                <!-- 商品列表 -->
                <div class="goods"><img src="images/02-goods.png" alt=""></div>
                <!-- 沙发 -->
                <div class="sofa"><img src="images/02-sofa.png" alt=""></div>
                <!-- 输入框 搜索框 关键字 -->
                <div class="input">
                    <img class="search" src="images/02-search.png" alt="">
                    <img class="key" src="images/02-key.png" alt="">
                </div>
                <!-- 文字 -->
                <div class="text">
                    <img class="text01" src="images/02-text1.png" alt="">
                    <img class="text02" src="images/02-text2.png" alt="">
                </div>
            </div>
        </div>
        <!-- active 是将此页设置为  默认显示的页面-->
        <!--<div class="section screen03 active">-->
        <div class="section screen03">
            <div class="content">
                <div class="sofa"><img src="images/02-sofa.png" alt=""></div>
                <div class="change">
                    <img src="images/03-change01.gif" alt="">
                    <img src="images/03-change02.gif" alt="">
                </div>
                <div class="cart">
                    <img src="images/03-cart01.gif" alt="">
                    <img src="images/03-cart02.gif" alt="">
                </div>
            </div>
        </div>
        <div class="section screen04">
            <div class="content">
                <!-- 白云 -->
                <div class="cloud"><img src="images/04-cloud.png" alt=""></div>
                <!-- 文字 -->
                <div class="text">
                    <img src="images/04-text01.png" alt="">
                    <img src="images/04-text02.png" alt="">
                </div>
                <!-- 购物车 -->
                <div class="cart"><img src="images/04-cart.png" alt=""></div>
                <!-- 沙发 -->
                <div class="sofa"><img src="images/02-sofa.png" alt=""></div>
                <!-- 收货地址 -->
                <div class="address">
                    <img src="images/04-address01.png" alt="">
                    <img src="images/04-address02.png" alt="">
                </div>
            </div>
        </div>
        <div class="section screen05">
            <div class="content">
                <!-- 文字 -->
                <div class="text"><img src="images/05-text.png" alt=""></div>
                <!-- 沙发 -->
                <div class="sofa"><img src="images/02-sofa.png" alt=""></div>
                <!-- 银行卡 -->
                <div class="card">
                    <img class="cardImg" src="images/05-card.png" alt="">
                    <img class="orderImg" src="images/05-order.png" alt="">
                </div>
                <!-- 鼠标 -->
                <div class="mouse">
                    <img class="m1" src="images/05-mouse01.png" alt="">
                    <img class="m2" src="images/05-mouse02.png" alt="">
                    <img class="hand" src="images/05-hand.png" alt="">
                </div>

            </div>
        </div>
        <div class="section screen06">
            <div class="content">
                <!-- 白云 -->
                <div class="cloud">
                    <img src="images/06-cloud01.png" alt="">
                    <img src="images/06-cloud02.png" alt="">
                </div>
                <!-- 文字 -->
                <div class="text">
                    <img src="images/06-text01.png" alt="">
                    <img src="images/06-text02.png" alt="">
                </div>
                <!-- 盒子 -->
                <div class="box"><img src="images/06-box.png" alt=""></div>
                <!-- 汽车 -->
                <div class="car">
                    <img class="carImg" src="images/06-car.png" alt="">
                    <img class="buyer" src="images/06-buyer.png" alt="">
                    <img class="address" src="images/06-address.png" alt="">
                    <img class="worker" src="images/06-worker.png" alt="">
                    <img class="say" src="images/06-say.png" alt="">
                </div>
                <!-- 收货人-->
                <div class="person">
                    <img class="personImg" src="images/06-person.png" alt="">
                    <img class="door" src="images/06-door.png" alt="">
                </div>
            </div>
        </div>
        <div class="section screen07">
            <div class="content">
                <div class="star">
                    <img src="images/07-star.png" alt="">
                    <img src="images/07-star.png" alt="">
                    <img src="images/07-star.png" alt="">
                    <img src="images/07-star.png" alt="">
                    <img src="images/07-star.png" alt="">
                </div>
                <div class="text"><img src="images/07-text.png" alt=""></div>
            </div>
        </div>
        <div class="section screen08">
            <div class="content">
                <!---->
                <div class="btn">
                    <img src="images/08-btn01.png" alt="">
                    <img src="images/08-btn02.gif" alt="">
                </div>
                <div class="again"><img src="images/08-again.png" alt=""></div>
                <div class="hand"><img src="images/08-hand.png" alt=""></div>
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.fullpage.js"></script>
    <script src="js/index.js"></script>
</body>
</html>